<#--
 * Created by Stony on 2016/7/6.
       \   ^__^
         \  (**)\__
            (__)\       )\/\
             U  ||------|
                ||     ||
-->
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8" />
    <title>订单和注册量图表</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link href="<@global.media_css/>bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="<@global.media_css/>bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>
    <link href="<@global.media_css/>font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="<@global.media_css/>style-metro.css" rel="stylesheet" type="text/css"/>
    <link href="<@global.media_css/>style.css" rel="stylesheet" type="text/css"/>
    <link href="<@global.media_css/>style-responsive.css" rel="stylesheet" type="text/css"/>
    <link href="<@global.media_css/>default.css" rel="stylesheet" type="text/css" id="style_color"/>
    <link href="<@global.media_css/>uniform.default.css" rel="stylesheet" type="text/css"/>
    <style>
        .page-content {
            margin-left: 3px;
            margin-right: 3px;
            margin-top: 0;
            min-height: 950px;
        }
        .dashboard-stat .visual2{
            padding-top: 50px;
            /* text-align: right; */
            font-size: 100px;
            letter-spacing: -1px;
            color: #fff;
            margin-bottom: 25px;
            width: 540px;
            height: 150px;
            display: block;
            float: left;
            padding-left: 15px;
            font-family: 微软雅黑;
            font-weight: bold;
        }
        .dashboard-stat .details .number {
            padding-top: 50px;
            text-align: right;
            font-size: 100px;
            letter-spacing: -1px;
            color: #fff;
            margin-bottom: 10px;
            font-family: 微软雅黑;
            font-weight: bold;
        }
        .dashboard-stat .more {
            clear: both;
            display: block;
            padding: 8px 10px 8px 10px;
            text-transform: uppercase;
            font-weight: 300;
            font-size: 28px;
            color: #fff;
            opacity: .7;
            filter: alpha(opacity=70);
            font-family: 微软雅黑;
        }
        .xAxis >.tickLabel
        {
            height: 35px;
            font-size: 10px;
            margin-top: 12px;
        }
    </style>
    <!-- END GLOBAL MANDATORY STYLES -->
    <link rel="shortcut icon" href="<@global.media_image/>favicon.ico" />
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="page">
<!-- BEGIN HEADER -->

<!-- END HEADER -->
<!-- BEGIN CONTAINER -->
<div class="page-container row-fluid">
    <!-- BEGIN SIDEBAR -->
    <div class="page-sidebar nav-collapse collapse hide"></div>
    <!-- END SIDEBAR -->
    <!-- BEGIN PAGE -->
    <div class="page-content">
        <!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
        <div id="portlet-config" class="modal hide">
            <div class="modal-header">
                <button data-dismiss="modal" class="close" type="button"></button>
                <h3>portlet Settings</h3>
            </div>
            <div class="modal-body">
                <p>Here will be a configuration form</p>
            </div>
        </div>
        <!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->
        <!-- BEGIN PAGE CONTAINER-->
        <div class="container-fluid">
            <!-- BEGIN PAGE HEADER-->
            <div class="row-fluid">
                <div class="span12 ">
                    <!-- BEGIN STYLE CUSTOMIZER -->

                    <!-- END BEGIN STYLE CUSTOMIZER -->
                    <!-- BEGIN PAGE TITLE & BREADCRUMB-->
                    <h3 class="page-title"><small></small>
                    </h3>
                    <ul class="breadcrumb hide">
                        <li>
                            <i class="icon-home"></i>
                            <a href="index.html">Home</a>
                            <i class="icon-angle-right"></i>
                        </li>
                        <li><a href="#">Visual Charts</a></li>
                    </ul>
                    <!-- END PAGE TITLE & BREADCRUMB-->
                </div>
            </div>
            <!-- BEGIN DASHBOARD STATS -->
            <div class="row-fluid">
                <div class="span6 responsive" data-tablet="span6" data-desktop="span3">
                    <div class="dashboard-stat blue">
                        <div class="visual2">
                            今日注册量
                        </div>
                        <div class="details">
                            <div class="number" id="userNumber">
                                1349
                            </div>
                        </div>
                        <a class="more" href="#">
                            首约汽车 2016年7月6日 11:08:20
                        </a>
                    </div>
                </div>
                <div class="span6 responsive" data-tablet="span6" data-desktop="span3">
                    <div class="dashboard-stat red">
                        <div class="visual2">
                            今日下单量
                        </div>
                        <div class="details">
                            <div class="number" id="orderNumber">549</div>
                        </div>
                        <a class="more" href="#">
                            首约汽车 2016年7月6日 11:08:20
                        </a>
                    </div>
                </div>
            </div>
            <!-- END DASHBOARD STATS -->
            <!-- END PAGE HEADER-->
            <!-- BEGIN CHART PORTLETS-->
            <div class="row-fluid">
                <div class="span6">
                    <!-- BEGIN INTERACTIVE CHART PORTLET-->
                    <div class="portlet box red">
                        <div class="portlet-title hide">
                            <div class="caption"><i class="icon-reorder"></i>注册量</div>
                            <div class="tools">
                                <a href="javascript:;" class="collapse"></a>
                                <a href="#portlet-config" data-toggle="modal" class="config"></a>
                                <a href="javascript:;" class="reload"></a>
                                <a href="javascript:;" class="remove"></a>
                            </div>
                        </div>
                        <div class="portlet-body">
                            <div id="chart_2" class="chart" style="min-height: 500px;"></div>
                        </div>
                    </div>
                    <!-- END INTERACTIVE CHART PORTLET-->
                </div>
                <div class="span6">
                    <!-- BEGIN INTERACTIVE CHART PORTLET-->
                    <div class="portlet box red">
                        <div class="portlet-title hide">
                            <div class="caption"><i class="icon-reorder"></i>订单量</div>
                            <div class="tools">
                                <a href="javascript:;" class="collapse"></a>
                                <a href="#portlet-config" data-toggle="modal" class="config"></a>
                                <a href="javascript:;" class="reload"></a>
                                <a href="javascript:;" class="remove"></a>
                            </div>
                        </div>
                        <div class="portlet-body">
                            <div id="chart_4" class="chart" style="min-height: 500px;"></div>
                        </div>
                    </div>
                    <!-- END INTERACTIVE CHART PORTLET-->
                </div>
            </div>
            <!-- END CHART PORTLETS-->
        </div>
        <!-- BEGIN PAGE CONTAINER-->
    </div>
    <!-- END PAGE -->
</div>
<!-- END CONTAINER -->
<!-- BEGIN FOOTER -->

<!-- END FOOTER -->
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<script src="<@global.media_js/>jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="<@global.media_js/>jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="<@global.media_js/>jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="<@global.media_js/>bootstrap.min.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="<@global.media_js/>excanvas.min.js"></script>
<script src="<@global.media_js/>respond.min.js"></script>
<![endif]-->
<script src="<@global.media_js/>jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="<@global.media_js/>jquery.blockui.min.js" type="text/javascript"></script>
<script src="<@global.media_js/>jquery.cookie.min.js" type="text/javascript"></script>
<script src="<@global.media_js/>jquery.uniform.min.js" type="text/javascript" ></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="<@global.media_js/>jquery.flot.js"></script>
<script src="<@global.media_js/>jquery.flot.resize.js"></script>
<script src="<@global.media_js/>jquery.flot.pie.js"></script>
<script src="<@global.media_js/>jquery.flot.stack.js"></script>
<script src="<@global.media_js/>jquery.flot.crosshair.js"></script>
<script type="text/javascript" src="<@global.media_js/>moment.min.js"></script>
<script src="<@global.media_js/>jquery.rotate.js"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="/static/js/app.js"></script>
<script >
    var orderMap = [];
    var userMap = [];
    var updateTimeCount = 1;
    function randValue() {
        return (Math.floor(Math.random() * (1 + 40 - 20))) + 20;
    }
    function showChart(){
        if(updateTimeCount >= 2){
            return;
        }
        var updateTime = 2000;
        $.ajax({
            type: "post",
            url: "/request/data/list",
            dataType: "json",
            success: function (data) {
                if(data.code == 1){
                    var users = data.user;
                    var orders = data.order;
                    var orderList = [];
                    var userList = [];
                    var index = 1;
                    for(var key in orders){
                        var val = orders[key];
                        var dd = [];
                        dd[0] =  index;
                        dd[1] = val;
                        orderList.push(dd);
                        index++;
                    }
                    index = 1;
                    for(var key in users){
                        var val = users[key];
                        //[1, randValue()-5],
                        var dd = [];
                        dd[0] =  index;
                        dd[1] = val;
                        userList.push(dd);
                        index++;
                    }


//                    console.dir(orderList);
//                    console.dir(userList);
                    orderMap = orderList;
                    userMap = userList;
                    loadChart(orderList, userList);
                    updateTimeCount++;
                }
                setTimeout(showChart, updateTime);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                setTimeout(showChart, updateTime);
            }
        });
    }
    function loadChart(orderList, userList){
        var count = 30;
        if(orderList.length > count){
            orderList = orderList.slice(orderList.length - count);
        }
        if(userList.length > count){
            userList = userList.slice(userList.length - count);
        }
        var time = moment().subtract(31, 'seconds');
        function getAddSeconds(){
            return time.add(1, 'seconds').format("HH:mm:ss");
        }
        var xaxisDate = [];
        for(var i = 0; i < count; i++){
            var dd = [];
            dd[0] =  (i+1);
            dd[1] = getAddSeconds();
            xaxisDate.push(dd)
        }
        time = moment().subtract(31, 'seconds');
        var orderXaxisDate = [];
        for(var key in orderList){
            //console.log(orderList[key][0])
            var dd = [];
            dd[0] =  orderList[key][0];
            dd[1] = getAddSeconds();
            orderXaxisDate.push(dd)
        }
        time = moment().subtract(31, 'seconds');
        var userXaxisDate = [];
        for(var key in userList){
            //console.log(orderList[key][0])
            var dd = [];
            dd[0] =  userList[key][0];
            dd[1] = getAddSeconds();
            userXaxisDate.push(dd)
        }

        var plot = $.plot($("#chart_2"), [{
            data: userList,
            label: "注册量"
        }
        ], {
            series: {
                lines: {
                    show: true,
                    lineWidth: 2,
                    fill: true,
                    fillColor: {
                        colors: [{
                            opacity: 0.05
                        }, {
                            opacity: 0.01
                        }
                        ]
                    }
                },
                points: {
                    show: true
                },
                shadowSize: 2
            },
            grid: {
                hoverable: true,
                clickable: true,
                tickColor: "#eee",
                borderWidth: 0
            },
            colors: ["#37b7f3", "#52e136"],
            xaxis: {
                ticks: userXaxisDate,
                tickDecimals: 0
            },
            yaxis: {
                min: Number(userList[0][1],10),
                ticks: 11,
                tickDecimals: 0
            }
            ,legend: {
                position:  "nw" //"ne" or "nw" or "se" or "sw"
            }
        });
        var plot = $.plot($("#chart_4"),
        [{
            data: orderList,
            label: "下单量"
        }
        ], {
            series: {
                lines: {
                    show: true,
                    lineWidth: 2,
                    fill: true,
                    fillColor: {
                        colors: [{
                            opacity: 0.05
                        }, {
                            opacity: 0.01
                        }
                        ]
                    }
                },
                points: {
                    show: true
                },
                shadowSize: 2
            },
            grid: {
                hoverable: true,
                clickable: true,
                tickColor: "#eee",
                borderWidth: 0
            },
            colors: ["#d12610", "#37b7f3", "#52e136"],
            xaxis: {

                ticks: orderXaxisDate,
                tickDecimals: 0
            },
            yaxis: {
                min: Number(orderList[0][1],10),
                ticks: 11,
                tickDecimals: 0
            }
            ,legend: {
                position:  "nw" //"ne" or "nw" or "se" or "sw"
            }
        });

        $(".xAxis > .tickLabel").rotate(-45);
        function showTooltip(x, y, contents) {
            $('<div id="tooltip">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                top: y + 5,
                left: x + 15,
                border: '1px solid #333',
                padding: '4px',
                color: '#fff',
                'border-radius': '3px',
                'background-color': '#333',
                opacity: 0.80
            }).appendTo("body").fadeIn(200);
        }

        var previousPoint = null;
        bindPlothover("#chart_2");
        bindPlothover("#chart_4");
        function bindPlothover(divName){
            $(divName).bind("plothover", function (event, pos, item) {
                $("#x").text(pos.x.toFixed(2));
                $("#y").text(pos.y.toFixed(2));

                if (item) {
                    if (previousPoint != item.dataIndex) {
                        previousPoint = item.dataIndex;

                        $("#tooltip").remove();
                        var x = item.datapoint[0].toFixed(0),
                                y = item.datapoint[1].toFixed(2);
                        var ticks = item.series.xaxis.ticks;

                        showTooltip(item.pageX, item.pageY, item.series.label + " : " + (x) + " = " + y);
                    }
                } else {
                    $("#tooltip").remove();
                    previousPoint = null;
                }
            });
        }
    }
    //Interactive Chart
    function updateMore(){
        var dateStr = moment().format("YYYY年MM月DD日 HH:mm:ss");
        $(".more").html("首汽约车 " + dateStr);
        setTimeout(updateMore, 1000);
    }
    function taskRequestData(){
        //userNumber
        var updateTime = 1000;
        $.ajax({
            type: "post",
            url: "/request/data",
            dataType: "json",
            success: function (data) {
                if(data.code == 1){
                    $("#userNumber").html(data.user);
                    $("#orderNumber").html(data.order);
                    if(orderMap.length >= 10){

                        var last = orderMap[orderMap.length -1];
                        var lastA = [];
                        lastA[0] = (last[0] + 1);
                        lastA[1] = data.order;
                        if( Number(orderMap[orderMap.length -1][1],10) != Number(data.order,10) ){
                            orderMap.push(lastA);
                        }


                        var last2 = userMap[userMap.length -1];
                        var lastB = [];
                        lastB[0] = (last2[0] + 1);
                        lastB[1] = data.user;
                        if( Number(userMap[userMap.length -1][1],10) != Number(data.user,10) ) {
                            userMap.push(lastB);
                        }

                        loadChart(orderMap, userMap);
                    }
                }
                setTimeout(taskRequestData, updateTime);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                setTimeout(taskRequestData, updateTime);
            }
        });
    }
</script>
<script>
    jQuery(document).ready(function() {
        // initiate layout and plugins
//        App.init();
//        chart2();
        showChart();
        updateMore();
        taskRequestData();
    });
</script>
<!-- END PAGE LEVEL SCRIPTS -->
</body>
<!-- END BODY -->
</html>